import * as echarts from 'echarts';
import { useEffect } from 'react';

const PopRightLine = (props) => {
    const{lineMockData,tableMockData}=props
    var option;
    function formatDate(value) {
        var date = new Date(value);
        var y = date.getFullYear(),
          m = date.getMonth() + 1,
          d = date.getDate(),
          h = date.getHours(),
          i = date.getMinutes(),
          s = date.getSeconds();
        if (m < 10) { m = '0' + m; }
        if (d < 10) { d = '0' + d; }
        if (h < 10) { h = '0' + h; }
        if (i < 10) { i = '0' + i; }
        if (s < 10) { s = '0' + s; }
        var t = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
        return t;
    }
    option = {
        backgroundColor:'',
      title: {
        left: 'center',
        text: '交通健康指数'
      },
      grid: {
        x: "12%",//x 偏移量
        y: "7%", // y 偏移量
        width: "87%", // 宽度
        height: "79%"// 高度
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (value,index) {
          var date = new Date(value);
          let params = value[0];
          return (
            (formatDate(params.value[0]))+
            '\n'+
            '指数:' +
            params.value[1]
          );
        },
        axisPointer: {
          animation: false
        }
      },
      xAxis: {
        type: 'time',
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
          show: false
        }
      },
      dataZoom: [
            
        {
          type: 'inside',
          start: 0,
          end: 100
        },
        {
        
          height:30,
          bottom:3,
          start: 0,
          end: 100
        }
      ],
      series: [
        {
          name: 'Fake Data',
          type: 'line',
          showSymbol: false,
          data:  lineMockData 
        }
      ]
    };

    useEffect(()=>{
        setTimeout(() => {
            let chartDom = document.getElementById('PopRightLine');
            // console.log('chartDOm',chartDom);
            let myChart = echarts.init(chartDom, 'dark');
            window.addEventListener("resize", () => {
                myChart.resize();
              });
            option && myChart.setOption(option);
            myChart.resize();
          }, 0);
    },[lineMockData,tableMockData])
    return(
        <div id='PopRightLine' style={{width:'100%',height:'100%'}}>

        </div>
    )
}
export default PopRightLine
